import React, { useEffect, useState } from 'react';
import { connect, history } from 'umi';
import { Form, Button, Card, Modal, Row, Col, Badge } from 'antd';
const SaleTypeModel = (props) => {
    const { visible = {}, onClose, onOk } = props
    const { location = {} } = history
    const { query = {} } = location
    const { accessId } = query
    const { show = false, detail = {} } = visible
    const { collectionType } = detail
    const [selectType, setSelectType] = useState('form')
    const list = [
        { title: "表单", value: 'form', content: "信息收集/报名登记" },
        { title: "接龙", value: 'Jielong', content: "进度清晰/快速收集" },
        { title: "投票", value: 'vote', content: "进度清晰/快速收集 " },
        { title: "问卷", value: 'questionnaire', content: "市场调研/满意度调研" }
    ]
    useEffect(() => {
        if (show) {
            if (collectionType) {
                setSelectType(collectionType)
            }
            else {
                setSelectType('form')
            }
        }
    }, [show])
    const handleUpAudit = () => {
        onOk(selectType)
        onClose()

    }
    const modalProps = {
        title: `选择表单类型 `,
        visible: show,
        width: 900,
        maskClosable: true,
        destroyOnClose: true,
        zIndex: 1001,
        onCancel: onClose,
        onOk: handleUpAudit
    };

    return <Modal {...modalProps}>
        <Row gutter={[12, 12]}>
            {list.map((item, o) => {
                const { title, value, content } = item
                return value === selectType ? <Col span={8}>
                    <Badge.Ribbon key={o} color="magenta" text={'已选中'}>
                        <Card title={title} size="small" style={{ cursor: 'pointer' }}>
                            {content}
                        </Card>
                    </Badge.Ribbon></Col> : <Col onClick={() => {
                        setSelectType(value)
                    }} span={8}>
                    <Card title={title} size="small" style={{ cursor: 'pointer' }}>
                        {content}
                    </Card></Col>
            })}

        </Row>
    </Modal>

}

export default connect(({ loading }) => ({
    loading: loading.effects['commission/fakeConfirmDistribute'],
}))(SaleTypeModel);